<template>
  <div class="home-view-container">
    <div class="top-panel">
      <div class="left-item"><OperationStatistics /></div>
      <div class="right-item"><LineOverview /></div>
    </div>
    <div class="center-panel">
      <div class="left-item"><MetroActivity /></div>
      <div class="right-item"><AlarmTrend /></div>
    </div>
    <div class="bottom-panel">
      <div class="left-item"><CustomerIndicator /></div>
      <div class="right-item"><LiveVideo /></div>
    </div>
  </div>
</template>

<script setup>
import OperationStatistics from '../components/panel/OperationStatistics.vue';
import MetroActivity from '../components/panel/MetroActivity.vue';
import CustomerIndicator from '../components/panel/CustomerIndicator.vue';
import LineOverview from '../components/panel/LineOverview.vue';
import AlarmTrend from '../components/panel/AlarmTrend.vue';
import LiveVideo from '../components/panel/LiveVideo.vue';
</script>

<style scoped lang="scss">
.home-view-container {
  position: absolute;
  top: 6.5%;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  padding: 0 20px;
  z-index: 1;
  pointer-events: none;

  .top-panel,
  .center-panel,
  .bottom-panel {
    display: flex;
    justify-content: space-between;
    user-select: none; /* 阻止文本选中 */
    -webkit-user-select: none; /* 兼容 Safari */
    -moz-user-select: none; /* 兼容 Firefox */
    -ms-user-select: none; /* 兼容 IE/Edge */
  }

  .left-item,
  .right-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
}
</style>
